<template>
  <div></div>
</template>

<script>
import icons from '@/components/IconSelector/icons'

export default {
  name: 'IconSelectorItem',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-icon-selector'
    },
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data() {
    return {
      icons,
      iconList: [],
      dataSource: icons,
      selectedIcon: this.value || '',
      currentTab: 'directional'
    }
  },
  created() {
    this.getIconList()
  },
  methods: {
    getIconList() {
      this.icons.forEach(item => {
        item.icons.forEach(icon => {
          this.iconList.push(icon)
        })
      })
    },
    filterOption(input, option) {
      return icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
    },
    handleSelectedIcon(icon) {
      this.selectedIcon = icon
      this.$emit('change', icon)
    },
    handleTabChange(activeKey) {
      this.currentTab = activeKey
    }
  }
}
</script>

<style>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
  color: #666;
  font-weight: bold;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
  border-bottom: 1px solid #f6f6f6;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item {
  padding-left: 16px;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
  text-align: center;
  cursor: default;
}

.certain-category-search-dropdown .ant-select-dropdown-menu {
  max-height: 300px;
}
</style>
<style scoped>
.certain-category-search-wrapper
  >>> .certain-category-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix {
  right: 12px;
}

.certain-category-search-wrapper >>> .certain-search-item-count {
  position: absolute;
  color: #999;
  right: 16px;
}

.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused .certain-category-icon {
  color: #108ee9;
}

.certain-category-search-wrapper >>> .certain-category-icon {
  color: #6e6e6e;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 16px;
}
</style>
